<template>
    <div class="bigbox">
        <div class="filePath">
            <div class="loc">
                {{ downloadLocation }}
            </div>
            <el-button class="btn" type="primary" @click="setSaveFilePath" size="small">设置</el-button>
        </div>
        <div class="notice">
            <div class="item">1、设置文件下载的保存地址</div>
            <div class="item">2、设置后，所有下载的文件都会保存在这个地址</div>
            <div class="item">3、请确保该地址有足够的存储空间</div>
            <div class="item">4、如果该地址不存在，则会自动创建</div>
            <div class="item">5、请确保该地址有足够的写入权限</div>
            <div class="item">6、图片保存地址，壁纸零时保存地址，软件更新保存地址</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { settingStore } from '@renderer/store/setting'
import { storeToRefs } from 'pinia'
const { ipcRenderer } = require('electron')
const set = settingStore()
const { downloadLocation } = storeToRefs(set)

// 当点击某个按钮或触发某个事件时，请求主进程选择本地文件路径
const setSaveFilePath = async () => {
    const res = await ipcRenderer.invoke('select-local-file-path')
    if (!res.canceled) {
        downloadLocation.value = res.filePaths[0]
        ipcRenderer.send('update-storage', JSON.stringify(set.$state))
    }
}
</script>

<style scoped lang="scss">
.bigbox {
    margin: 20px;

    .filePath {
        border-radius: 10px;

        .loc {
            border: 1px solid #ccc;
            padding: 0px 10px;
            border-radius: 3px;
            height: 30px;
            line-height: 30px;
        }

        .btn {
            height: 30px;
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 10;
            width: 100px;
        }
    }

    .notice {
        background-color: $setBack ;
        border-radius: 10px;
        padding: 10px;
        margin-top: 10px;
        box-shadow: 0.3em 0.3em 0.7em #00000015;
        transition: border 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);

        .item {
            font-size: 15px;
            margin: 5px;
            padding: 2px 10px;
        }
    }
}
</style>